<template>
	<div id="design">
		<ul>
			<li v-for="item in designList" :key="item.id">
				<img :src="item.path" />
				<div class="footerBox">
					<p class="text1">{{item.work}}</p>
					<p class="line"></p>
					<p class="text1">{{item.city}}</p>
					<p class="line"></p>
					<p class="text1">{{item.name}}</p>
				</div>
				<p class="introduce">{{item.introduce}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	
	
	export default {
		name: "design",
		data() {
			return {
				currentId:'4',
				designList: [{
						id: '1',
						path: require('../../../assets/img/design-img.png'),
						work: "故宫新品研究员",
						city: '北京',
						name: '宋轶',
						introduce: "“关于故宫文化，我有很多想法，但是最重要的是怎么用设计把文化融入生活”"
					},
					{
						id: '2',
						path: require('../../../assets/img/design-img.png'),
						work: "故宫新品研究员",
						city: '北京',
						name: '宋轶',
						introduce: "“关于故宫文化，我有很多想法，但是最重要的是怎么用设计把文化融入生活”"
					},
					{
						id: '3',
						path: require('../../../assets/img/design-img.png'),
						work: "故宫新品研究员",
						city: '北京',
						name: '宋轶',
						introduce: "“关于故宫文化，我有很多想法，但是最重要的是怎么用设计把文化融入生活”"
					},
					{
						id: '4',
						path: require('../../../assets/img/design-img.png'),
						work: "故宫新品研究员",
						city: '北京',
						name: '宋轶',
						introduce: "“关于故宫文化，我有很多想法，但是最重要的是怎么用设计把文化融入生活”"
					}
				]
			}
		},
		components:{
			
			
		}
	}
</script>

<style scoped="scoped" lang="less">
	#design {
		background: #FAF8F8;
		li:nth-child(1){
			margin-top: 0;
		}
		li {
			display: flex;
			flex-direction: column;
			margin-top: 0.22rem;
			img {
				width: 3.75rem;
				height: 2.1rem;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}

			.footerBox {
				display: flex;
				margin: 0.16rem 0 0 0.2rem;

				.text1 {
					font-size: 0.14rem;
					font-weight: bold;
					color: #333333;
					opacity: 1;
				}

				.line {
					display: inline-block;
					border: 0.01rem solid #333333;
					height: 0.10rem;
					opacity: 1;
					margin: 0 0.04rem;
					margin-top: 0.05rem;
				}
			}
			.introduce{
				margin: 0.07rem 0 0 0.2rem;
				font-size: 0.12rem;
				color: #999999;
				opacity: 1;
			}

		}
	}
</style>
